<template>
  <!-- 会员详细页面 -->
  <div class="members-details">
    <!-- 返回上一步 -->
    <navHead></navHead>
    <!-- 用户详细按钮 -->
    <div class="details-btn">
      <el-button plain>用户详细</el-button>
    </div>
    <!-- 内容部分 -->
    <div class="details-content">
      <el-card class="box-card">
        <!-- 基本信息 -->
        <el-descriptions class="margin-top" :column="3" :size="size" border>
          <template slot="title">
            <i class="el-icon-s-management"></i>
            <span style="font-family: '微软雅黑'; font-weight: 400"> </span>
            <span
              style="
                font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                font-weight: 700;
              "
              >基本信息</span
            >
          </template>
          <el-descriptions-item>
            <template slot="label"> 账号 </template>
            12312312312
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 所在省 </template>
            山东
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 所在城市 </template>
            苏州市
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 实名认证主体 </template>
            xxx有限责任公司
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 企业法人 </template>
            张三丰
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 注册时间 </template>
            2017-22-22 12:23:34
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 拓展人 </template>
            王麻子
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 营业执照注册号 </template>
            23423sdfs
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 是否平台销售 </template>
            是
            <i style="float: right" class="el-icon-edit"></i>
          </el-descriptions-item>
        </el-descriptions>
        <!-- 实名认证信息 -->
        <el-descriptions class="margin-top" :column="3" :size="size" border>
          <template slot="title">
            <i class="el-icon-s-management"></i>
            <span style="font-family: '微软雅黑'; font-weight: 400"> </span>
            <span
              style="
                font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                font-weight: 700;
              "
              >实名认证信息</span
            >
          </template>
          <el-descriptions-item>
            <template slot="label"> 认证状态 </template>
            审核中
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 认证主体 </template>
            企业
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 认证主体名称 </template>
            xxx有限责任公司
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 法人姓名 </template>
            xxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 开户行名称 </template>
            xxx分行
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 开户账号 </template>
            xxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 联系人姓名 </template>
            王麻子
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 联系方式 </template>
            xxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 营业执照 </template>
            <el-link type="primary" :underline="false">查看</el-link>
          </el-descriptions-item>
        </el-descriptions>
        <!-- 收获地址 -->
        <div class="descriptions-address">
          <el-descriptions
            class="margin-top"
            direction="vertical"
            :size="size"
            border
          >
            <template slot="title">
              <i class="el-icon-s-management"></i>
              <span style="font-family: '微软雅黑'; font-weight: 400"> </span>
              <span
                style="
                  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                  font-weight: 700;
                "
                >收获地址</span
              >
            </template>
          </el-descriptions>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="姓名" width="380">
            </el-table-column>
            <el-table-column prop="name" label="手机号码" width="380">
            </el-table-column>
            <el-table-column prop="address" label="详细地址"> </el-table-column>
            <el-table-column prop="address" label="默认地址" width="380">
            </el-table-column>
          </el-table>
        </div>
        <!-- 订单记录 -->
        <div class="descriptions-order-history">
          <el-descriptions
            class="margin-top"
            direction="vertical"
            :size="size"
            border
          >
            <template slot="title">
              <i class="el-icon-s-management"></i>
              <span style="font-family: '微软雅黑'; font-weight: 400"> </span>
              <span
                style="
                  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                  font-weight: 700;
                "
                >订单记录</span
              >
            </template>
          </el-descriptions>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="订单编号"> </el-table-column>
            <el-table-column prop="name" label="提交时间"> </el-table-column>
            <el-table-column prop="address" label="用户账号"> </el-table-column>
            <el-table-column prop="address" label="订单金额"> </el-table-column>
            <el-table-column prop="address" label="贷款方式"> </el-table-column>
            <el-table-column prop="address" label="商品"> </el-table-column>
            <el-table-column prop="address" label="订单状态"> </el-table-column>
            <el-table-column label="操作">
              <el-link type="primary" :underline="false">查看订单</el-link>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            class="pagination"
            style="
              text-align: right;
              width: 100%;
              height: 60px;
              padding-top: 26px;
            "
            @size-change="handleSizeChange"
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="prev, pager, next,sizes"
            :total="50"
          >
          </el-pagination>
        </div>
        <!-- 订单记录 -->
        <div class="descriptions-order-history">
          <el-descriptions
            class="margin-top"
            direction="vertical"
            :size="size"
            border
          >
            <template slot="title">
              <i class="el-icon-s-management"></i>
              <span style="font-family: '微软雅黑'; font-weight: 400"> </span>
              <span
                style="
                  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                  font-weight: 700;
                "
                >订单记录</span
              >
            </template>
          </el-descriptions>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="药材名称"> </el-table-column>
            <el-table-column prop="name" label="浏览时间"> </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            class="pagination"
            style="
              text-align: right;
              width: 100%;
              height: 60px;
              padding-top: 26px;
            "
            @size-change="handleSizeChange"
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="prev, pager, next,sizes"
            :total="50"
          >
          </el-pagination>
        </div>
        <!-- 跟进记录 -->
        <div class="descriptions-order-history">
          <el-descriptions
            class="margin-top"
            direction="vertical"
            :size="size"
            border
          >
            <template slot="title">
              <i class="el-icon-s-management"></i>
              <span style="font-family: '微软雅黑'; font-weight: 400"> </span>
              <span
                style="
                  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                  font-weight: 700;
                "
                >订单记录</span
              >
            </template>
          </el-descriptions>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="跟进人"> </el-table-column>
            <el-table-column prop="name" label="跟进时间"> </el-table-column>
            <el-table-column prop="name" label="跟进记录"> </el-table-column>
          </el-table>
          <div style="text-align: right; margin-top: 20px">
            <el-button plain>添加跟进记录</el-button>
          </div>
          <!-- 分页 -->
          <el-pagination
            class="pagination"
            style="
              text-align: right;
              width: 100%;
              height: 60px;
              padding-top: 26px;
            "
            @size-change="handleSizeChange"
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="prev, pager, next,sizes"
            :total="50"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import navHead from "@/components/members/members_details_com.vue";
export default {
  data() {
    return {
      size: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "23423423",
          address: "是",
        },
        {
          date: "2016-05-04",
          name: "2342342342",
          address: "否",
        },
        {
          date: "2016-05-01",
          name: "23423423423",
          address: "否",
        },
        {
          date: "2016-05-03",
          name: "23423423423432",
          address: "否",
        },
      ],
    };
  },
  methods: {},
  components: {
    navHead,
  },
};
</script>

<style lang="scss" scoped>
.members-details {
  width: 99%;
  height: 100%;
  margin: auto;
}

.members-details .details-btn {
  height: 40px;
  margin: 20px auto;
  width: 80%;
}

.box-card {
  width: 80%;
  margin: auto;
}

.members-details ::v-deep .el-descriptions__header {
  height: 50px;
  margin-bottom: 0;
}

.members-details ::v-deep .pagination {
  height: 60px;
  line-height: 60px;
  padding-top: 6px;
}

.members-details ::v-deep .pagination input,
.members-details ::v-deep .pagination li,
.members-details ::v-deep .pagination button {
  height: 35px;
  line-height: 35px;
}

.members-details ::v-deep .cell {
  text-align: center;
}

.el-table ::v-deep th.el-table__cell.is-leaf {
  background-color: #f5f5f5;
}
</style>